<template>
	<div class="home-container">
		<header class="customHeaderStyle">
			<!-- 当在后台模板活动页中头部的东西不能编辑，显示遮罩 -->
			<div class="customHeaderStyle_cover"></div>
			<div @click="goBack">
				<div class="go-back">
					<i></i>  
					<i></i>
					<i></i>
				</div>
			</div>
			<div class="headerCustomTitle">{{Title}}</div>
			<div class="rightIcon">
				<v-CartShowNum></v-CartShowNum>
			</div>
		</header>
		<div :style="`background-color: ${Bgcolor}`" class="ActivesMainContent">
			<div class="header" v-sdcon>
				<div class="drag-here-box" v-show="!componentsLength">
					<div class="drag-here">
						头部内容拖拽到此处
					</div>
				</div>
				<component 
					v-for="(item, index) in getRealComponentsList[0][0]" 
					v-sdrag="{componentName: item.componentName, handleType: 'sort', index}" 
					:is="generatorComName(item.componentName)" 
					:key="index" 
					:config="item"
					:data-id="item.id" 
					:dataList="dataStore[item.componentName][item.id]" 
					:copolddataobj="copolddata" 
					:part="0"
					:titleInfor="HeaderTabNavArray">
				</component>
			</div>
			<div class="main" v-sdcon>
				<div class="drag-here-box" v-show="!componentsLength2">
					<div class="drag-here">
						主体内容拖拽到此处
					</div>
				</div>
				<component v-for="(item, index) in getRealComponentsList[0][1]" 
					v-sdrag="{componentName: item.componentName, handleType: 'sort', index, deleteAble: deleteAble(item.id)}" 
					:is="generatorComName(item.componentName)" 
					:key="index" 
					:config="Object.assign({}, item)" 
					:data-id="item.id" 
					:dataList="dataStore[item.componentName][item.id]" 
					:copolddataobj="copolddata" 
					:part="1" 
					:titleInfor="HeaderTabNavArray">
				</component>
			</div>
			<div class="footer">
			</div>
		</div>
	</div>
</template>
<script>
	import { mapGetters } from "vuex";
	import initData from "../../utils/lxn/handleData";
	import { REAL_PREFIX } from "@/config/components/prefix.js";
	import CartShowNum from "../../components/CartShowNum";
	import axios from "axios";
	import getpageName from "../../utils/gw/getPageName"
	let pageName = getpageName()
	export default {
		data() {
			return {
				copolddata: {},
				//页面的配置
				Bgcolor: "",
				Title: ""
			}
		},
		components: {
			"v-CartShowNum": CartShowNum,
		},
		computed: {
			...mapGetters("gw", [
				"getRealComponentsList"
			]),
			...mapGetters("xxy", {
				dataStore: "getDataStore"
			}),
			componentsLength() {
				if(this.$store.getters['gw/getRealComponentsList'][0][0].length > 0) {
					return true
				} else {
					return false
				}
			},
			componentsLength2() {
				if(this.$store.getters['gw/getRealComponentsList'][0][1].length > 0) {
					return true
				} else {
					return false
				}
			},
			//获取当前页面的配置对象
			pageConfig() {
				// console.log(this.$store.getters['gw/getRealComponentsList'][1],"打印pageConfig")
				return this.$store.getters['gw/getRealComponentsList'][1]
			},
			//获取tabHeader的config对象
			HeaderTabNavArray() {
				let pageTree1 = this.$store.getters['gw/getRealComponentsList'][0][0] || [];
				for(var i = 0; i < pageTree1.length; i++) {
					if(pageTree1[i].componentName === 'TabHead' &&  pageTree1[i].config && pageTree1[i].config.pages) {
						let arr = pageTree1[i].config.pages.filter(item => {
							return item.state === "1";
						}).map(item => {
							return {
								goodsClassName: item.name,
								comId: item.comId
							};
						});
						return arr;
					}
				}
				return []
			}
		},
		methods: {
			//返回上一页
			goBack() {
				window.history.go(-1);
			},
			//优惠券信息对比
			queryCoupons() {
				var sessionId = localStorage.getItem('sessionId');
				let url = api.trade_host + '/marketCenter/getDiffReleasedCoupons/' + api.enterpriseCode;
				let config = {
					url: url,
					method: 'GET',
					headers: {
						'sessionId': sessionId,
					},
				};
				axios(config).then((res) => {
					this.copolddata = res.data.data[0]
				})
			},
			inite() {
				PSEvent.listen("bannerUpdate", (componentObj) => {
					initData(true,componentObj);
				});
				PSEvent.listen("postersUpdate", (componentObj) => {
					initData(true, componentObj);
				});
				PSEvent.listen("newZoneUpdate", (componentObj) => {
					initData(true, componentObj);
				});
				PSEvent.listen("slidePicUpdate", (componentObj) => {
					initData(true, componentObj);
				});
				PSEvent.listen("TwoProUpdate", (componentObj) => {
					initData(true, componentObj);
				});
				PSEvent.listen("OneProUpdate", (componentObj) => {
					initData(true, componentObj);
				});
				PSEvent.listen("NineProUpdate", (componentObj) => {
					initData(true, componentObj);
				});
				PSEvent.listen("CouponsUpdate", (componentObj) => {
					initData(true, componentObj);
				});
				PSEvent.listen("CouponsUpdate2", (componentObj) => {
					initData(true,componentObj);
				});
				PSEvent.listen("BgcolorUpdate", () => {
					this.getStyleConfig()
					// initData(true);
				});
			},
			removeListen() {
				PSEvent.remove("bannerUpdate");
				PSEvent.remove("postersUpdate");
				PSEvent.remove("newZoneUpdate");
				PSEvent.remove("slidePicUpdate");
				PSEvent.remove("TwoProUpdate");
				PSEvent.remove("OneProUpdate");
				PSEvent.remove("NineProUpdate");
				PSEvent.remove("CouponsUpdate");
				PSEvent.remove("CouponsUpdate2");
				PSEvent.remove("BgcolorUpdate");
			},
			generatorComName(baseName) {
				return REAL_PREFIX + baseName;
			},
			//获取页面配置数据
			getStyleConfig() {
				this.Bgcolor = this.pageConfig.activitiesBgcolor;
				this.Title = this.pageConfig.activitiesTitle
				// console.log("执行方法",pageName,this.Title)
				console.log(this.Bgcolor, this.Title);
			},
			//组件是否允许删除
			deleteAble(comId) {
				for (let item of this.HeaderTabNavArray) {
					if (comId === item.comId) {
						return false;
					}
				}
				return true;
			}
		},
		watch: {
			dataStore(data, oldData) {
				console.log("打印dataStore111", data);
				
			}
		},
		created() {
			if(!this.$store.getters['cjy/newClassifyData']) {
				this.$store.dispatch('cjy/queryNewClassifyList');
			}
			
		},
		mounted() {
			initData();
			this.inite();
			this.queryCoupons();
			this.getStyleConfig()
		},
		beforeDestroy() {
			this.removeListen()
		}
	}
</script>
<style scoped>
	.customHeaderStyle{
		position: relative;
		background: #fff;
		min-height: 3rem;
		border-bottom: 1px solid #eaeaea;
		color: #444;
		font-weight: 700;
		left: 0;
		top: 0;
		line-height: 2.25rem;
		width: 100%;
		font-size: .9rem;
		text-align: center;
		margin: 0;
		padding: 0;
	}
	.headerCustomTitle{
		overflow: hidden;
		right: 6rem;
		font-weight: 500;
		min-height: 2.25rem;
		position: absolute;
		margin: 0;
		text-align: left;
		white-space: nowrap;
		left: 3rem;
		width: auto;
		text-overflow: ellipsis;
		z-index: 2;
		font-size: 1.1rem;
		margin-top: .35rem;
		top: 1px;
	}
	.ActivesMainContent{
		overflow-y:scroll
	}
	.rightIcon {
		position: absolute;
		top: 0.5rem;
		right: 0.75rem;
		font-weight: 100;
		line-height: 1rem;
	}
	
	.header {
		/*height: 100px;
		background: red;*/
		width: 100%;
	}
	
	.main {
		flex: 1;
	}
	.home-container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-flow: column nowrap;
	}
	.drag-here-box {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .drag-here {
        width: 90%;
        height: 180px;
        border: 2px dashed #ddd;
        color: #999;
        font-size: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
	.customHeaderStyle_cover {
		height: 100%;
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 6;
	}
</style>